//1. 引入创建路由器的函数

import { createRouter, createWebHashHistory, createWebHistory } from "vue-router";
import AboutPage from "../components/AboutPage.vue";
import HomePage from "../components/HomePage.vue";
import ArticlePage from "../components/ArticlePage.vue";
import Student from "../components/Student.vue";
import StudentDetail from "../components/StudentDetail.vue";
// 路径
// 1.  ./代表从当前文件开始找
// @代表在src目录下找 需要配置 工程化写法
//2.   定义具体路由规则

const router = createRouter({
  history: createWebHashHistory(),    //控制路由工作模式
  // 1.createWebHistory   直接是路由规则
  // 优点 更直观 为具体路径  缺点 部署时需要服务端单独配置

  // 2.createWebHashHistory    先有一个#再是路由规则
  // 优点 兼容性好   #相当于锚点 对seo不太友好
  // 后台管理系统一般用这个 追求稳定
  routes: [
    { path: '/about', component: AboutPage },
    { path: '/home', component: HomePage },
    { path: '/article', component: ArticlePage },
    {
      path: '/student', component: Student, children: [
        { path: 'student-detail', component: StudentDetail }
      ]
    }
    //子集路由用children定义
    //用path
    // { path: '/student', component: Student, children:[
    //  { path: 'student-detail', component: StudentDetail }   //子路由的路径一定不带杠
    // ]}
    //用name
    // {  path: '/student', component: Student, children: [
    //  { name: 's-detail', path: 'student-detail',component: StudentDetail }
    // ]}
  ]
})

//第二种写路径的方式 name: 'about' 要求名称必须唯一 若重名 以最新的为准
//访问时必须以 :to="{name: 'about' }" 访问  且浏览器访问上方不会写出路径


//把它暴露出去  
export default router
